<template>
  <div class="wraa">
    <!--阴影1-->
    <div class="yin"  v-show="isShow">
      <ul class="tixing">
        <li class="denglu1" @click="dEng">
          登录
        </li>
        <li class="zhuce1">
          <router-link to="zhuce">注册</router-link>
        </li>
        <p class="p" @click="doCha">❌</p>
      </ul>
    </div>
    <!--阴影2-->
    <div class="yin2" v-show="isDeaf">
      <ul class="ul1">
        <li class="ksdl">
					<span>
						<router-link to="zhuce">注册</router-link>
					</span>
          <span class="span10">快速登录</span>
          <span  class="mimadenglu">密码登录</span>
        </li>
        <li class="yinyonghu">
          <p>新用户首次登录自动注册阿拉灯账号</p>
          <div class="div">
            <img src="../../assets/个人中心/1个人中心/shouji.png"/>
            <input type="text" placeholder="请输入手机号" />
          </div>
          <div class="div2">
            <div>
              <img src="../../assets/个人中心/1个人中心/yanzm.png"/>
              <input class="input" type="text" placeholder="请输入手机验证码" />
            </div>
            <div>
              <input class="input" type="text" placeholder="请输入验证码" />
            </div>
          </div>
          <div class="quxiao">
            <span class="quxiao1">取消</span>
            <span >登录</span>
          </div>
        </li>
      </ul>

      <ul class="ul2">
        <li class="ksdl">
					<span>
						<router-link to="/zhuce">注册</router-link>
					</span>
          <span class="span11">密码登录</span>
          <span class="kuaisudenglu">快速登录</span>
        </li>
        <li class="yinyonghu mima">
          <div class="div mimadiv">
            <img src="../../assets/个人中心/1个人中心/shouji.png"/>
            <input type="text" placeholder="请输入手机号" />
          </div>
          <div class="div">
            <img src="../../assets/个人中心/1个人中心/mima.png"/>
            <input type="text" placeholder="请输入密码" />
          </div>
          <p class="wangji">忘记密码?</p>
          <router-link to="/person">
          <div class="quxiao">

              <span class="quxiao1">取消</span>

            <span>登录</span>
          </div>
          </router-link>
        </li>
      </ul>

      <ul class="ul3">
        <li class="ksdl">
					<span class="span12">
						<img class="fanhui12" src="../../assets/个人中心/1个人中心/fanhui.png"/>
					</span>
          <span style="font-size: 1rem ; color: #E53E42;">设置登录密码</span>
          <span class="span11">
						<img class="quxiao11" src="../../assets/个人中心/1个人中心/quxiaop.png"/>
					</span>
        </li>
        <li class="yinyonghu mima">
          <div class="div mimadiv">
            <img src="../../assets/个人中心/1个人中心/shouji.png"/>
            <input type="text" placeholder="请输入密码(6~32位)" />
          </div>
          <div class="div">
            <img src="../../assets/个人中心/1个人中心/mima.png"/>
            <input type="text" placeholder="请确认密码" />
          </div>
          <div class="quxiao">
            <span class="too">下一步</span>
          </div>
        </li>
      </ul>

      <ul class="ul4">
        <li class="ksdl">
					<span class="span13">
						<img class="fanhui13" src="../../assets/个人中心/1个人中心/fanhui.png"/>
					</span>
          <span style="font-size: 1rem ; color: #E53E42;">忘记密码</span>
          <span class="span13">
						<img class="quxiao13" src="../../assets/个人中心/1个人中心/quxiaop.png"/>
					</span>
        </li>
        <li class="yinyonghu mima">
          <div class="div mimadiv">
            <img src="../../assets/个人中心/1个人中心/shouji.png"/>
            <input type="text" placeholder="请输入密码(6~32位)" />
          </div>
          <div class="div">
            <img src="../../assets/个人中心/1个人中心/mima.png"/>
            <input type="text" placeholder="请确认密码" />
          </div>
          <div class="quxiao">
						<span class="queren">
							<router-link to="">确认</router-link>
						</span>
          </div>
        </li>
      </ul>

    </div>
    <div class="wrap1">
      <div class="head2_tou">
        <p class="p1">个人中心</p>
        <img class="img2"src="../../assets/个人中心/1个人中心/信息.png"/>
        <img class="img1"  src="../../assets/个人中心/1个人中心/设置.png"/>
      </div>

      <div class="grzx_nc1">
        <div class="yuan11"></div>
        <p @click="doChu">登录/注册</p>
        <div class="zhtx">
          <router-link to="/wodezhanghu">
            <p>账户提现</p>
          </router-link>
        </div>
      </div>
      <div class="dingD">
        <p>我的订单</p>
        <router-link to="">
          <span >查看所有订单</span>
        </router-link>
        <img src="../../assets/个人中心/1个人中心/右箭头.png"/>
      </div>
      <!--<div>-->
        <!--<boy1></boy1>-->
      <!--</div>-->
      <ul class="fanhui">
        <li class="li1">
          <p>我的返金排号</p>
          <span >查看更多</span>
          <img src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
      </ul>
      <ul class="godD">
        <li>
          <p>0</p>
          <span>我的神灯</span>
        </li>
        <li>
          <p>0</p>
          <span>我的积分</span>
        </li>
        <li>
          <p>0</p>
          <span>我的优惠券</span>
        </li>
        <li>
          <p>0</p>
          <span>我的心得</span>
        </li>
      </ul>
      <ul class="img">
        <li>
          <p><img src="../../assets/个人中心/2客服与反馈/实名认证.png"/></p>
          <span>实名认证</span>
        </li>
        <li>
          <p><img src="../../assets/个人中心/1个人中心/收货地址.png"/></p>
          <span>收货地址</span>
        </li>
        <li>
          <p><img src="../../assets/个人中心/1个人中心/关注公众号.png"/></p>
          <span>关注公众号</span>
        </li>
        <router-link to="/kefuyufankui">
          <li>
            <p><img src="../../assets/个人中心/1个人中心/客服与反馈.png"/></p>
            <span>客服与反馈</span>
          </li>
        </router-link>
      </ul>
      <ul  id="img5">
        <li>
          <p><img src="../../assets/个人中心/1个人中心/shop.png"/></p>
          <span>我的商城</span>
        </li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="bottom">
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   data(){
     return {
       isShow : false,
       isDeaf : false
     }
   },
   methods: {
     doChu(){
       this.isShow = true
     },
     doCha(){
        this.isShow = false
     },
     dEng(){
       this.isDeaf = true
     }
   }
 }
</script>

<style scoped="scoped">
  .ul3,.ul4{
    display: none;
  }
  .yin2 .ul3 .ksdl .span12 .fanhui12,.yin2 .ul3 .ksdl .span11 .quxiao11,.ul4 .ksdl .span13 .fanhui13,.ul4 .ksdl .span13 .quxiao13{
    position: absolute;
    top:0.416rem;
    width: 0.833rem;
    height: 0.805rem;
  }
  .yin2 .ul1 .ksdl .span10{
    font-size: 1rem;
    color: red;
  }
  .yin2 .ul2 .mima{
    position: relative;
  }
  .yin2 .ul2 .mima>P{
    line-height: 1rem;
    height: 0.833rem;
    position: absolute;
    width: 3.59rem;
    color: red;
    padding-right:1.111rem;
    right: 0.555rem;
    font-size: 0.5rem;
  }

  /*yin1*/

  .yin,.yin2{
    display: none;
    /*background: black;
        opacity: 0.4;*/
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
  }
  .yin {
    display: block;
  }
  .yin2{
    display: block;
  }
  .yin ul{
    width: 100%;
    height: 9.722rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
  }
  .yin ul li:nth-child(1){
    margin: 2.055rem auto 0.555rem;
    width: 90%;
    height: 1.666rem;
    border-radius: 0.833rem;
    background: #E53E42;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.666rem;
    font-size: 0.777rem;
    color: white;
  }
  .yin ul li:nth-child(2){
    margin: 0 auto;
    width: 90%;
    height: 1.666rem;
    border-radius: 0.833rem;
    background: white;
    border: 1px solid #CCCCCC;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.666rem;
    font-size: 0.777rem;
    color: black;
  }
  .yin ul>p{
    position: absolute;
    right: 0.555rem;
    top: 0.555rem;
    width: 1rem;
    cursor: pointer;
    text-align: center;
    height: 1rem;
  }
  /*yin2*/
  .yin2 ul{
    width: 92%;
    height: 11.111rem;
    position: absolute;
    bottom: 7.777rem;
    background: white;
    left: 0.555rem;
  }
  .yin2 ul .ksdl{
    width: 100%;
    height: 1.666rem;
    display: flex;
  }
  .yin2 ul .ksdl span{
    flex: 1;
    text-align: center;
    line-height: 1.666rem;
    font-size: 0.833rem;
  }
  .yin2 ul .yinyonghu{
    width: 100%;
    height: 6.666rem;
    border: 1px solid #CCCCCC;
    border-left: none;
    border-right:none;
  }
  .yin2 ul .yinyonghu p{
    text-align: center;
    font-size: 0.5rem;
    line-height: 1.944rem;
    letter-spacing: 0;
    color: #808080;
  }
  .yin2 ul .yinyonghu .div{
    margin: 0 auto 0.555rem;
    width: 95%;
    height: 1.666rem;
    border-radius: 0.833rem;
    border: 1px solid #CCCCCC;
    display: flex;
    align-items: center;
  }
  .yin2 ul .yinyonghu .div2{
    margin: 0 auto 0.555rem;
    width: 95%;
    height: 1.666rem;
    display: flex;
    align-items: center;
  }
  .yinyonghu .div2 div:nth-child(1){
    float: left;
    width: 10rem;
    height: 1.666rem;
    border-radius: 0.833rem;
    border: 1px solid #CCCCCC;
    padding-left: 0.555rem;
    display: flex;
    align-items: center;
  }
  .yinyonghu .div2 div:nth-child(2){
    float: right;
    width: 5.555rem;
    height: 1.666rem;
    border-radius: 0.833rem;
    border: 1px solid #CCCCCC;
  }
  /*mima*/
  .yin2 ul .mimadiv:nth-child(1){
    margin-top: 0.555rem;
  }
  .yin2 ul:nth-child(2){
    display: block;
  }



  .yinyonghu .div img,.yinyonghu .div2 div img{
    width: 0.611rem;
    height: 0.833rem;
    padding-left: 1rem;
    padding-right: 0.555rem;
    border-right: 1px solid #CCCCCC;
  }
  .yinyonghu .div2 div img{
    padding-left: 0.45rem;
  }
  .yinyonghu .div input,.yinyonghu .div div input ,.yinyonghu .div2 div:nth-child(2) input{
    font-size: 0.666rem;
    line-height: 0.833rem;
    letter-spacing: 0;
    color: #808080;
    padding-left: 0.555rem;
  }
  .yinyonghu .div2 div:nth-child(2) input{
    width: 4.305rem;
    margin-top:0.472rem;
  }
  .yinyonghu .div2 div:nth-child(1) .input{
    font-size: 0.666rem;
    padding-left: 0.555rem;
  }
  .yinyonghu .quxiao{
    width: 100%;
    height: 2.222rem;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -2.7rem;
  }
  .ul1 .yinyonghu .quxiao,.ul3 .yinyonghu .quxiao,.ul4 .yinyonghu .quxiao{
    bottom: 0;
  }
  .quxiao span{
    text-align: center;
    flex: 1;
    height: 100%;
    line-height: 2.222rem;
    font-size: 0.666rem;
  }
  .quxiao span:nth-child(2){
    color: #E53E42;
  }




  .head2_wrap{
    width: 100%;
  }
  .head2_tou{
    width: 100%;
    height: 2.666rem;
    display: flex;
    background: #E53E42;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  .head2_tou .img2{
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 2.444rem;
  }
  .head2_tou .img1{
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 0.555rem;
  }
  .head2_tou .p1{
    font-size: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .grzx_nc1{
    width: 100%;
    height: 6.666rem;
    background: #fee3e3;
    position: relative;
    background: url(../../assets/个人中心/1个人中心/bag.png) no-repeat ;
    background-size: 100% 100%;
  }
  .yuan11{
    position: absolute;
    width: 2.777rem;
    height: 2.777rem;
    background: #e7e5e5;
    border-radius: 50%;
    top: 1.277rem;
    left: 0.611rem;
    right: 0.583rem;
  }
  .grzx_nc1 p{
    position: absolute;
    top: 2.361rem;
    left: 3.944rem;
    height: 0.805rem;
    font-weight: 400;
    font-size: 0.833rem;
    letter-spacing: 0;
    color: white;
  }
  .zhtx{
    position: absolute;
    bottom: 1.055rem;
    right: 1.222rem;
    width: 3.888rem;
    height: 1.111rem;
    line-height: 1.2rem;
    background-color: #2d3b3c;
    opacity: 0.8;
    border-radius: 0.555rem;
  }
  .zhtx p{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    height: 0.666rem;
    line-height: 1rem;
    font-size: 0.666rem;
    letter-spacing: 0;
    color: white;
  }
  .dingD{
    width: 100%;
    height: 2.222rem;
    border-bottom: 1px solid #CCCCCC;
    background: white;
    position: relative;
  }
  .dingD p{
    position: absolute;
    top: 0.722rem;
    left: 0.555rem;
    height: 0.805rem;
    font-size: 0.833rem;
    line-height: 1rem;
    letter-spacing: 0;
  }
  .dingD span{
    top: 0.777rem;
    position: absolute;
    right: 1.111rem;
    height: 0.638rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
  }
  .dingD img{
    position: absolute;
    width: 0.277rem;
    height: 0.5rem;
    top: 1.05rem;
    right: 0.555rem;
  }
  .fanhui{
    width: 100%;
    margin-top: 0.555rem;
  }
  .fanhui li{
    display: block;
    height: 2.222rem;
    background: white;
    border-bottom: 1px solid #ccc;
    position: relative;
  }
  .fanhui .li1 p{
    position: absolute;
    height: 0.777rem;
    font-size: 0.833rem;
    line-height: 1rem;
    top: 0.722rem;
    left: 0.555rem;
    letter-spacing: 0;
  }
  .fanhui .li1 span{
    position: absolute;
    right: 1.111rem;
    top: 0.733rem;
    height: 0.638rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
  }
  .fanhui .li1 img{
    position: absolute;
    height: 0.5rem;
    right: 0.444rem;
    top:1rem;
  }
  .godD{
    margin-top: 0.555rem;
    width: 100%;
    height: 3.333rem;
    background: white;
    border-bottom: 1px solid #CCCCCC;
    display: flex;
  }
  .godD li{
    text-align: center;
    flex: 1;
  }
  .godD li p{
    margin-top: 0.666rem;
    font-weight: 900;
    font-size: 0.833rem;
    letter-spacing: 0;
    color: #e53e42;
  }
  .godD li span{
    display: block;
    margin-top:0.277rem;
    height: 0.638rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
  }
  .img,#img5{
    background: #f2f2f2;
    width:100%;
    height: 3.333rem;
    display: flex;
  }
  #img5{
    background: white;
  }
  .img li,#img5 li{
    text-align: center;
    flex: 1;
  }
  .img li p,#img5 li p{
    margin: 0.666rem auto 0;
    width: 1.194rem;
    height: 1rem;
  }
  .img li p img,#img5 li p img{
    width: 100%;
    height: 100%;
  }
  .img li span,#img5 li span{
    display: block;
    margin-top:0.277rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
  }
  .bottom{
    margin-bottom: 3.888rem;
  }

</style>
